<template>
  <div>
    <!-- 金额 -->
    <div class="font-color-3 flex count-box pad-t-14">
      <span class="font-25 pad-t-10">￥</span>
      <span style="font-size:40px">{{orderInfo.orderPrice}}</span>
    </div>
    <!-- 支付步骤 -->
    <div class="pay-step">
      <div class="font-color-3 flex-col">
        <span class="font-15 mar-b-2 font-w">支付步骤</span>
        <span class="font-13" :class="index !== orderInfo.paymentSteps.length -1 ? 'mar-b-2':''" v-for="(item, index) of orderInfo.paymentSteps" :key="index">{{item}}</span>
      </div>
      <div class="font-color-3 mar-t-20">
        <div class="mar-b-2 flex flex-between">
          <span class="font-15 font-w">收款账户信息</span>
          <div class="flex flex-center" v-if="orderInfo.wholesaleCollectionImage" @click="checkSaveImgAuth">
            <img class="width-13 height-13" :src="fileSpace + '/images/save-img.png'" v-if="fileSpace" />
            <span class="font-13 bule-color">保存到相册</span>
          </div>
          <div v-else class="flex flex-center" @click="$pt.setClipboardData({data: '收款账户信息: ' + '开户名称:' + orderInfo.bankAccountName +'开户银行:'+orderInfo.bankName+'开户银行账号:'+ orderInfo.bankCardNo})">
            <img class="width-13 height-13 mar-r-4" :src="fileSpace + '/images/copy-img.png'" v-if="fileSpace" />
            <span class="font-13 bule-color" >一键复制</span>
          </div>
        </div>
        <div v-if="orderInfo.wholesaleCollectionImage" @click="previewImg">
          <img class="width-100 height-136" :src="orderInfo.wholesaleCollectionImage" alt="">
        </div>
        <div v-if="orderInfo.bankAccountName">
          <div class="font-13 mar-b-2">
            <span>开户名称:</span>
            <span>{{orderInfo.bankAccountName}}</span>
          </div>
          <div class="font-13 mar-b-2">
            <span>开户银行:</span>
            <span>{{orderInfo.bankName}}</span>
          </div>
          <div class="font-13 mar-b-2">
            <span>开户银行账号:</span>
            <span>{{orderInfo.bankCardNo}}</span>
          </div>
        </div>
      </div>
    </div>
    <div v-if="orderInfo.applyRecordRemark" class="remark-box flex flex-between" @click="goRecordPage">
      <span class="font-15 font-color-3 line-1">{{orderInfo.applyRecordRemark}}</span>
      <van-icon name="arrow" class="font-color-9"/>
    </div>
    <!-- 提交按钮 -->
    <div class="btn-box flex flex-center">
      <div class="submit-btn font-19" :class="orderInfo.isCanApply === 1 ? 'active-status':'dis-status'" @click="submitEvent">
        {{orderInfo.applyButtonText}}
      </div>
    </div>
    <!-- 预览图片 -->
    <div class="layout" v-if="showPreview" @click="showPreview = false"></div>
    <div class="preview-box" v-if="showPreview">
      <img class="width-per-100" :src="orderInfo.wholesaleCollectionImage" alt="">
    </div>
  </div>
</template>

<script>
import {getOrderOfflinePaymentInfo} from '@/api/shop'
export default {
  data() {
    return {
      orderId: '',
      orderInfo: {},
      showPreview: false
    }
  },
  mounted() {
    this.orderId = this.getCurrentPage().query.orderId
    if (this.orderId) {
      this.getOrderOfflinePaymentInfo()
    }
  },
  methods: {
    // 获取订单线下付款信息
    getOrderOfflinePaymentInfo() {
      let params = {
        enterpriseId: this.getEnterpriseId,
        orderId: this.orderId
      }
      getOrderOfflinePaymentInfo(params).then(res => {
        console.log(res)
        this.orderInfo = res.data
      })
    },
    // 预览收款信息
    previewImg() {
      this.showPreview = true
    },
    // 前往申请记录页
    goRecordPage() {
      this.$pt.navigateTo({url: `/pages/shop/counter/application-record/main?orderId=${this.orderId}`})
    },
    submitEvent() {
      if (!this.orderInfo.isCanApply) return
      this.$pt.navigateTo({url: `/pages/shop/counter/submit-credentials/main?orderId=${this.orderId}`})
    },
    // 检测用户是否授权保存图片到相册 权限
    checkSaveImgAuth() {
      const that = this
      that.$pt.getSetting({
        success: res => {
          if (!res.authSetting['scope.writePhotosAlbum']) {
            // 如果没有授权图片保存功能,则进行授权申请操作
            that.$pt.authorize({
              scope: 'scope.writePhotosAlbum',
              success: function() {
                // 授权图片保存功能成功
                that.$utils.showToast({ title: '下载中请勿操作' })
                // 调用保存图片函数
                that.saveImg()
              },
              fail: function(res) {
                that.$utils.showToast({ title: '授权失败！' })
              }
            })
          } else {
            // 已经授权过图片保存功能的则，直接调用保存图片函数
            that.saveImg()
          }
        }
      })
    },
    saveImg() {
      console.log(3)
      const that = this
      that.$pt.downloadFile({
        url: that.orderInfo.wholesaleCollectionImage,
        success: (img) => {
          // 将图片保存到相册
          that.$pt.saveImageToPhotosAlbum({
            filePath: img.tempFilePath,
            success: function(res) {
              console.log(res)
              that.$utils.showToast({ title: '保存成功' })
            },
            fail: function() {
              that.$utils.showToast({ title: '保存失败' })
            }
          })
        },
        fail: function(res) {
          console.log(res)
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .count-box{
    justify-content: center;
    align-items: flex-start;
    margin-bottom: 18.5px;
  }
  .pay-step {
    padding-top: 11.5px;
    padding-left: 16.5px;
    padding-bottom:22px ;
    padding-right: 17px;
    background: #fff;
  }
  .btn-box {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    background: #fff;
    height: 71.5px;
    .submit-btn {
      width: 345px;
      height: 45px;
      line-height: 45px;
      border-radius: 23px;
      text-align: center;
    }
    .dis-status {
      background: #F1F1F1;
      color: #999999;
    }
    .active-status {
      background: #FF4E23;
      color: #fff;
    }
  }
  .remark-box {
    position: fixed;
    left: 0;
    width: 100%;
    background: #FFF6DF;
    height: 30px;
    line-height: 30px;
    padding-left: 15px;
    box-sizing: border-box;
    bottom: 80px;
    padding-right: 15px;
  }
  .bule-color {
    color: #0096FF;
  }
  .layout{
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }
  .preview-box {
    img{
      width: 100%;
      position:absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      z-index: 2;
    }
  }
</style>